import { Button, Form, Input } from 'antd';
import React from 'react';
import {useNavigate} from "react-router-dom";
import {loginAsync,LoginParams} from "../../app/slice/userSlice";
import {useAppDispatch} from "../../app/hooks";


const Signup = () => {
  let dispatch = useAppDispatch();
  //navigate : location.href
  let navigate = useNavigate();

  //提交的合成事件
  const onFinish = async (values:any) => {//
      let result = await dispatch(loginAsync(values));
      //跳转到首页
      if(result.type === "user/loginAsync/fulfilled"){
          navigate("/page")
      }
  };

  const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
  };
  return (
      <Form style={{width:500,height:300,border:"2px solid #ccc",margin:"100px auto",padding:"50px"}}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      >
        <h2 style={{textAlign:"center"}}>欢迎使用CMS内容管理系统</h2><br />
        <Form.Item name="name" label="昵称">
          <Input />
        </Form.Item>
        <Form.Item name="password" label="密码">
          <Input.Password />
        </Form.Item>
        <Form.Item name="email">
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
  );
};

export default Signup;
